<template>
  <div class="con">
        
      <el-main style="padding: 0">
        <!-- 充值提现  -->
        <div class="contbox6_10">
          <p class="titlelist6_10">
            账户管理
            <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>通道管理
          </p>
          <div class="content">
          <div class="sousuojg6_10">
            <el-form :model="formInline" label-width="80px" class="demo-form-inline">
              <el-form-item label="通道编号">
                <el-input
                  v-model="formInline.channelNo"
                  placeholder="请输入通道编号"
                ></el-input>
              </el-form-item>
              <el-form-item label="通道名称">
                <el-input
                  v-model="formInline.channelName"
                  placeholder="请输入通道名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="通道类型">
                <el-select
                  v-model="formInline.channelType"

                  placeholder="请选择"
                >
                  <el-option label="全部" value></el-option>
                  <el-option label="代付" value="1"></el-option>
                  <el-option label="支付" value="2"></el-option>
                  <el-option label="代付加支付" value="3"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item style="float: right;margin-top: 0px"> -->
              <div class="boxer">
                
              </div>
              <!-- </el-form-item> -->
            </el-form>
          </div>
          
          <p class="buttons">
            <el-button type="primary" @click="queryPayActiveList"
                  >搜索</el-button
                >
                <el-button style="margin-left: 10px" type="" @click="reset"
                  >重置</el-button
                >
              <el-button icon="el-icon-plus" class="butt" style="margin-left:40px" type="primary" @click="activity(1)"
                >创建</el-button
              >
               <el-button
            type="primary"
            @click="payActiveListExport"
            v-if="total>0"
            class="butt"
            >批量导出</el-button
          >
          </p>
          <el-table
            :data="tableData"
            tooltip-effect="dark"
            :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
            stripe
            border
            :row-style="{height:'0px'}"
            :cell-style="{padding:'0px'}"
            style="width: 98%;margin-bottom: 20px; margin-left: 20px;"
          >
            <el-table-column
              type="selection"
              
              min-width="40"
            ></el-table-column>
            <el-table-column
              prop="channelNo"
              show-overflow-tooltip
              min-width="80"
              label="通道编号"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="channelName"
              show-overflow-tooltip
              min-width="200"
              label="通道名称"
            ></el-table-column>
            <el-table-column  min-width="200" label="通道类型">
              <template slot-scope="scope">
                <span v-if="scope.row.channelType == 1">代付</span>
                <span v-if="scope.row.channelType == 2">支付</span>
                <span v-if="scope.row.channelType == 3">代付加支付</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="payCharge"
              show-overflow-tooltip
              min-width="200"
              label="支付交易费率"
            ></el-table-column>
            <el-table-column
              prop="payBehalfCharge"
              show-overflow-tooltip
              min-width="200"
              label="交易代付手续费（元/笔）"
            ></el-table-column>
            <el-table-column
              prop="d0TradeRate"
              show-overflow-tooltip
              min-width="100"
              label="机构d0交易费率"
            ></el-table-column>
            <el-table-column
              prop="d0DrawFee"
              show-overflow-tooltip
              min-width="100"
              label="机构d0手续费"
            ></el-table-column>
            <el-table-column
              prop="payCharge"
              show-overflow-tooltip
              min-width="100"
              label="支付交易费率"
            ></el-table-column>
            <el-table-column
              prop="payBehalfCharge"
              show-overflow-tooltip
              min-width="100"
              label="支付手续费"
            ></el-table-column>
            <el-table-column
              
              min-width="220"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  v-if="isAuth('passagewayUpdate')"
                  size="mini"
                  @click="updata(scope.row.id)"
                  >修改</el-button
                >
                <!-- <el-button
                  type="primary"
                  v-if="scope.row.status == 0 && isAuth('passagewayStop')"
                  @click="changeStatus(scope.row.id, 0)"
                  size="mini"
                  >修改</el-button
                > -->
                <el-button
                  type="text"
                  v-if="scope.row.status == 1 && isAuth('passagewayStop')"
                  @click="changeStatus(scope.row.id, 1)"
                  size="mini"
                  >停用</el-button
                >
                <el-button
                  type="text"
                  v-if="isAuth('passagewayBank')"
                  size="mini"
                  @click="bank(scope.row)"
                  >支持银行</el-button
                >
              </template>
            </el-table-column>
          </el-table>
         
          <el-pagination
            background
            style="text-align: right"
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formInline.page"
            :page-size="formInline.number"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[ 20, 50, 100]"
            :total="total"
          ></el-pagination>
        </div></div>
      </el-main>

      <addChannelList
      :set="set"
        :ChannelListShow="ChannelListShow"
        :types="types"
        :saveChannelUid="saveChannelUid"
        v-on="ChannelListSuccess()"
      ></addChannelList>
  </div>
</template>
<script type="text/ecmascript-6">
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import addChannelList from "./addChannelList";
import qs from "qs";
import axios from "axios";
export default {
  data() {
    return {
      ChannelListShow: false,
      total:null,
      formInline: {
        channelNo: "",//通道编号
        channelName: "", //通道名称
        channelType: "",
        page: 1,//分页数
        number: 20,//每页条
        status: "", //业务状态
      },
      totalNum: 0, //总页数
      saveChannelUid: 0,
      set:0,
      form: {},
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      form: false,
      types: 0,
    };
  },
  components: {
    addChannelList,
  },
  created() {
    axios
      .post("/api/channel/queryChannelList", {page:1,number:20})
      .then((res) => {
        console.log("下面是通道的列表");
        console.log(res)
        this.total = res.data.total
        console.log(res.data.data);
        this.tableData = res.data.data
        console.log(this.tableData)
      })
      .catch((err) => {
        console.log(err);
      });
  },
  mounted() {
    // this.queryPayActiveList();
  },
  methods: {
    // 重置
    reset() {
      this.formInline.channelNo = "";
      this.formInline.channelName = "";
      this.formInline.status = "";
      this.formInline.oemName = "";
      this.formInline.oEMName = "";
      this.formInline.startDate = "";
      this.formInline.endDate = "";
      this.formInline.officeUid = "";
      this.formInline.page=1
      this.mechanism = "";
      this.dataTime = [];
      this.queryPayActiveList();
    },
    updata(id) {
      this.set = 1
      // alert(id)
      this.saveChannelUid = id;
      this.ChannelListShow = true;
      this.types = 2;
    },
    activity(num) {
      this.ChannelListShow = true;
      this.types = 1;
      // this.saveChannelUid = 0
    },
    changeStatus(uid, n) {
      let pl = {
        uid: uid,
        status: n,
      };
      https.channelUpdateStatus(pl).then((res) => {
        if (res.data.code !== "0000") {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2, //1秒后自动关闭
          });
          // this.$notify({ title: "错误", message: res.data.msg, type: "error" });
          return;
        }
        // this.$notify({ title: "成功", message: "成功", type: "success" });
        this.queryPayActiveList();
      });
    },
    queryPayActiveList() {
      if (this.form == true) return;
      this.form = true;
      this.listLoading = true;
      https.queryChannelList(this.formInline).then((res) => {
        if (res.data.code !== "0000") {
          layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          // this.$notify({ title: "错误", message: res.data.msg, type: "error" });
          this.form = false;
          this.listLoading = false;
          return;
        }
        this.tableData = res.data.data;
        this.totalNum = res.data.total;
        this.form = false;
        this.listLoading = false;
      });
    },
    payActiveListExport() {
      // window.location.href = `api/active/payActiveList/excel/export?${qs.stringify(this.formInline)}`;
      let that = this;
      that
        .axios({
          url: "api/active/payActiveList/excel/export",
          method: "POST",
          headers: { "Content-Type": "application/json;charset=utf-8" },
          data: that.formInline,
          responseType: "arraybuffer",
        })
        .then((res) => {
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          var link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          let date = new Date();
          link.download =
            "通道管理列表" +
            date.getFullYear() +
            (date.getMonth() < 10 ? "0" + date.getMonth() : date.getMonth()) +
            (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
            (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
            (date.getMinutes() < 10
              ? "0" + date.getMinutes()
              : date.getMinutes()) +
            (date.getSeconds() < 10
              ? "0" + date.getSeconds()
              : date.getSeconds());
          link.click();
        })
        .catch((e) => {
        });
    },
    handleSizeChange(val) {
      this.formInline.number = val; //动态改变
      this.queryPayActiveList();
    },
    handleCurrentChange(val) {
      this.formInline.page = val; //动态改变
      this.queryPayActiveList();
    },
    ChannelListSuccess() {
      // alert("执行")



      bus.$on("ChannelListSuccess", (res) => {
        if (res.type == 1) {
          this.queryPayActiveList();
        }
        this.ChannelListShow = res.show;
      });
    },
    bank(val) {
      console.log(val)
      //通道编号
      let channelNo = val.channelNo
      //通道名称
      let channelName = val.channelName
      //通道类型
      let channelType = val.channelType
      this.$router.push({
        path: "channelListBack",
        name: "channelListBack",
        query: {
          channelNo:channelNo,
          channelName:channelName,
          channelType:channelType
        },
      });
    },
  },
};
</script>
<style scoped>
.con{
  position: relative;
}
.elbtn {
  margin-left: 80%;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
}
.btn {
  float: right;
}

.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
   height: 32px;
}

</style>